<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1200px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .img {
            width: 9600px;
            height: 600px;
            position: absolute;
            left: -1200px;
            top: 0;
        }

        img {
            width: 1200px;
            height: 100%;
            float: left;
            display: flex;
        }

        .hots {
            width: 220px;
            height: 30px;
            overflow: hidden;
            position: absolute;
            left: calc(50% - 90px);
            bottom: 20px;
        }

        .hots span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            background-color: antiquewhite;
            cursor: pointer;
        }

        .direction span {
            display: inline-block;
            height: 69px;
            width: 41px;
            background-image: url(./images/icon.png);
            background-repeat: no-repeat;
            cursor: pointer;
            position: absolute;
            top: calc(50% - 34.5px);
        }

        .direction .prev {
            left: 10px;
            background-position: -84px 0;
        }

        .prev:hover {
            background-position: 0 0;
        }

        .direction .next {
            right: 10px;
            background-position: -124px 0;
        }

        .next:hover {
            background-position: -42px 0;
        }

        .show {
            display: none;
        }

        .current {
            background-color: blue !important;

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img">
            <img src="./images/wallhaven-dpgleg.jpg" alt="">
            <img src="./images/wallhaven-1kkjkw.png" alt="">
            <img src="./images/wallhaven-k9d8gd.jpg" alt="">
            <img src="./images/wallhaven-yjeqxx.jpg" alt="">
            <img src="./images/wallhaven-2kw8jx.png" alt="">
            <img src="./images/eb725a318a7e47a2a139b9621a166e0b.png" alt="">
            <img src="./images/宵宫.jpg" alt="">
            <img src="./images/1.jpg" alt="">
        </div>
        <div class="hots">
            <span style="margin-left: -30px;">0</span>
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
        </div>
        <div class="direction">
            <span class="prev"></span>
            <span class="next"></span>
        </div>
    </div>
    <script>
        let time = 0
        fun()
        function fun() {
            time = setInterval(() => {
                you_yi()
            }, 1500)
        }

        $('.hots span').click(function () {
            clearInterval(time)
            $(this).addClass('current').siblings().removeClass('current')
            $('.img').animate({ left: (($(this).text()) * -1200) + 'px' }, 'slow')
            fun()
        })

        $('.prev').click(function () {
            clearInterval(time)
            zuo_yi()
            fun()
        })


        $('.next').click(function () {
            clearInterval(time)
            you_yi()
            fun()
        })

        function you_yi() {
            $('.hots span').filter('.current').next().toggleClass('current').siblings().removeClass('current')
            $('.img').animate({ left: (($('.hots span').filter('.current').text()) * -1200) + 'px' }, 'slow')
            setTimeout(() => {
                if ($(".img").position().left <= -8400) {
                    $('.img').css({ left: '-1200px' })
                    $('.hots span').first().next().toggleClass('current').siblings().removeClass('current')
                }
            }, 680);
        }

        function zuo_yi() {
            $('.hots span').filter('.current').prev().toggleClass('current').siblings().removeClass('current')
            $('.img').animate({ left: (($('.hots span').filter('.current').text()) * -1200) + 'px' }, 'slow')
            setTimeout(() => {
                if ($(".img").position().left >= 0) {
                    $('.img').css({ left: '-7200px' })
                    $('.hots span').last().prev().toggleClass('current').siblings().removeClass('current')
                }
            }, 680);
        }
    </script>
</body>

</html>